<!-- Handle Language Change -->
<script type="text/javascript">
  // get nodes
  var $zh = document.querySelector(".zh");
  var $en = document.querySelector(".en");
  var $select = document.querySelector("select");

  // bind hashchange event
  // Changes at v1.7.2: change the language flag from hash-basing to in-memory basing
  // due to its confliction with catalog anchors.
  // window.addEventListener('hashchange', _render);

  // handle render
  function _render(_hash) {
    var _hash = _hash || window.location.hash;
    // en
    if (_hash == "#en") {
      $select.selectedIndex = 1;
      $en.style.display = "block";
      $en.classList.add("active");
      $zh.style.display = "none";
      $zh.classList.remove("active");
    }
    // zh by default
    else {
      // not trigger onChange, otherwise cause a loop call.
      $select.selectedIndex = 0;
      $zh.style.display = "block";
      $zh.classList.add("active");
      $en.style.display = "none";
      $en.classList.remove("active");
    }
    // interop with catalog
    if ("{{ page.catalog }}") generateCatalog(".catalog-body");
  }

  // handle select change
  function onLanChange(index) {
    if (index == 0) {
      _hash = "#zh";
    } else {
      _hash = "#en";
    }
    _render(_hash);
  }

  // init
  _render();
</script>
